<script type="text/ng-template" id="tree-dnd-template-render.html">
    <div ng-class="(treeData.length) ? '' : 'list-group-item active '" ?>
        <ul tree-dnd-nodes style="min-height: 100px">
            <li tree-dnd-node="node" ng-repeat="node in treeData track by node.__hashKey__"
                ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
                ng-include="'tree-dnd-template-fetch.html'"></li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="tree-dnd-template-fetch.html">
    <div class="list-group-item text-info"
         ng-class="(node.__selected__ ? 'list-group-item-success ':' ') + $node_class"
         ng-click="onClick(node)"
         ng-style="expandingProperty.cellStyle ? expandingProperty.cellStyle : {}">
        <a class="btn btn-default" aria-label="Justify" type="button" tree-dnd-node-handle>
            <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span> </a>

        {{node[expandingProperty.field] || node[expandingProperty]}}

        <span ng-class="node.__icon_class__" ng-click="toggleExpand(node)"></span>

        <div class="pull-right">
            <span ng-repeat="col in colDefinitions" ng-class="col.cellClass" ng-style="col.cellStyle"
                  compile="col.cellTemplate">
                {{node[col.field]}}
            </span>
        </div>
    </div>
    <ul tree-dnd-nodes>
        <li tree-dnd-node="node" ng-repeat="node in node.__children__ track by node.__hashKey__"
            ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
            ng-include="'tree-dnd-template-fetch.html'"></li>
    </ul>
</script>

<div class="row">
    <div class="col-xs-7">
        <div class="row">
            <panel title="Use Template-Url (Empty + Only Drop)" type="danger">
                <tree-dnd
                        tree-control="my_tree"
                        column-defs="col_defs_min"
                        expand-on="expanding_property"
                        template-url="tree-dnd-template-render.html"

                        enable-drop="true"

                        icon-leaf="none"
                        icon-expand="glyphicon glyphicon-chevron-down"
                        icon-collapse="glyphicon glyphicon-chevron-right"
                ></tree-dnd>
            </panel>
        </div>

        <div class="row">
            <panel title="Use Template-Url (with data)">
                <tree-dnd
                        tree-data="tree_data"
                        tree-control="my_tree"
                        column-defs="col_defs_min"
                        expand-on="expanding_property"
                        template-url="tree-dnd-template-render.html"

                        enable-drop="true"
                        enable-drag="true"
                        enable-collapse="true"

                        icon-leaf="none"
                        icon-expand="glyphicon glyphicon-chevron-down"
                        icon-collapse="glyphicon glyphicon-chevron-right"
                ></tree-dnd>
            </panel>
        </div>
    </div>

    <div class="col-xs-5">
        <panel title="Differenced: Template Inside (Only Drag)" type="success">
            <tree-dnd tree-data="tree_data"
                      tree-control="my_tree"
                      column-defs="[]"
                      expand-on="expanding_property"

                      enable-drag="true"

                      icon-leaf="none"
                      icon-expand="glyphicon glyphicon-chevron-down"
                      icon-collapse="glyphicon glyphicon-chevron-right"
            >
                <ul tree-dnd-nodes style="min-height: 100px"
                    ng-class="(treeData.length) ? '' : 'list-group-item active'">
                    <li tree-dnd-node="node" ng-repeat="node in treeData track by node.__hashKey__"
                        ng-show="node.__visible__" compile="expandingProperty.cellTemplate"
                        ng-include="'tree-dnd-template-fetch.html'"></li>
                </ul>
            </tree-dnd>
        </panel>
    </div>
</div>